<template>
	<view>
		<mvBar :mysNavConfig="mysNavConfig" @onLeftClick="onLeftClick"></mvBar>
		<view class="u-page">
			<u-toast ref="uToast"></u-toast>
			<u-form labelPosition="left">
				<u-form-item label="手机号码" labelWidth="75" borderBottom>
					<u-input border="none" v-model="cellphone" disabled maxlength="11" placeholder="请绑定手机号">
						<template slot="suffix">
							<u-tag :text="cellphone==''?'绑定':'改绑'" plain size="medium" type="primary"
								@click="show=true">
							</u-tag>
						</template>
					</u-input>
				</u-form-item>
				<u-form-item label="工作单位" labelWidth="75" borderBottom>
					<u-input border="none" v-model="work" maxlength="20" placeholder="请输入工作单位">
					</u-input>
				</u-form-item>
				<u-form-item label="工作职务" labelWidth="75" borderBottom>
					<u-input border="none" v-model="job" maxlength="10" placeholder="请输入工作职务">
					</u-input>
				</u-form-item>
			</u-form>
			<view style="width: 90%; margin: 10% auto;">
				<u-button shape='circle' color="linear-gradient(to right, rgb(40, 166, 225), rgb(67, 132, 236))"
					type="primary" text="确定" @click="alter">
				</u-button>
			</view>
		</view>
		<u-popup :round="10" :show="show" mode='center' @close="show=false">
			<view class="tanchuang">
				<view class="title">{{cellphone==''?'手机号绑定':'手机号改绑'}}</view>
				<u-form labelPosition="left">
					<u-form-item label="手机号码" labelWidth="65" borderBottom>
						<u-input border="none" type="number" v-model="phone.number" maxlength="11" placeholder="请输入手机号">
							<template slot="suffix">
								<u-tag :text="phone.verificationname" size="medium" type="primary" @click="sendcode">
								</u-tag>
							</template>
						</u-input>
					</u-form-item>
					<view v-show="showcode">
						<u-form-item label="验证码" labelWidth="70" borderBottom>
							<u-input border="none" type="number" maxlength="4" v-model="phone.verificationCode"
								placeholder="请输入验证码">
							</u-input>
						</u-form-item>
					</view>
				</u-form>
				<view style="width: 90%; margin: 5% auto;">
					<u-button shape='circle' color="linear-gradient(to right, rgb(3, 200, 168), rgb(107, 212, 201))"
						type="primary" text="绑定" @click="binding">
					</u-button>
				</view>
			</view>
		</u-popup>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				mysNavConfig: {
					/* 占位开启  */
					navPadding: true,
					/* 背景 */
					bgColor: "#2979FF",
					/* 标题 （屏幕中心居中 两边图标中心居中使用slot center1） */
					navTitle: {
						text: "个人资料",
						color: "#ffffff",
						fontSize: "18px", // px upx rpx
						fontWeight: "500", // 100 - 700
					},
					isCustomFn: true,
					btnType: "type2",
					type2Config: {
						// 左图标
						leftPath: "/static/img/back.png",
						// 右图标
						rightPath: "/static/img/home.png",
						// 圆角
						radius: "40rpx",
					}
				},
				// 手机号码
				cellphone: '',
				//工作单位
				work: '',
				// 职务
				job: '',
				userinfo: '',
				show: false,
				showcode: false,
				// 绑定弹窗
				phone: {
					// 绑定手机号
					number: '',
					//验证码文本
					verificationname: '获取验证码',
					//验证码
					verificationCode: '',
					time: 60,
					timer: '',
				}
			}
		},
		onLoad() {
			this.userinfo = uni.getStorageSync('userinfo');
			//获取用户信息
			this.getuserinfo()
		},
		methods: {
			//返回
			onLeftClick() {
				uni.switchTab({
					url: '/pages/tabbar/userCenter'
				});
			},
			//获取用户信息
			getuserinfo() {
				uni.showLoading({
					title: "加载中...",
					mask: true,
				});
				uni.request({
					url: getApp().globalData.serverAddress + this.$uri.Uri_lookuserinfo.replace(
						"{userRealId}", this.userinfo.userRealId),
					method: "GET",
					success: (res) => {
						if (res.statusCode !== 200) {
							this.$utils.showToast(this, '服务器错误,请联系技术支持人员!', 'error');
							return
						}
						if (res.data.code == 0) {
							this.work = res.data.data.department
							this.job = res.data.data.job
							this.cellphone = res.data.data.phone
						} else {
							this.$utils.showToast(this, res.data.msg, 'error');
						}
					},
					fail() {
						this.$utils.showToast(this, "加载失败！", 'error');
					},
					complete() {
						uni.hideLoading();
					}
				})
			},
			//发送验证码
			sendcode() {
				//判断手机号码位数
				if (this.phone.number.length == 11) {
					//timer等于空的话表示没有发送验证码或者验证码倒计时已经结束
					if (this.phone.timer == '') {
						var code = {
							phoneNumber: this.phone.number
						}
						uni.showLoading({
							title: "发送中...",
							mask: true,
						});
						uni.request({
							url: getApp().globalData.serverAddress + this.$uri.Uri_getcode,
							data: JSON.stringify(code),
							dataType: "json",
							method: "POST",
							success: (res) => {
								if (res.statusCode !== 200) {
									uni.showToast({
										title: '服务器错误,请联系技术支持人员!',
										icon: 'none',
										duration: 2000,
										mask: true,
									});
									return
								}
								if (res.data.data.code == 0) {
									uni.showToast({
										title: '发送成功！',
										icon: 'none',
										duration: 2000,
										mask: true,
									});
									// 开启60秒倒计时
									this.getValidStr();
									this.phone.timer = setInterval(this.getValidStr, 1000)
									this.showcode = true
								} else {
									uni.showToast({
										title: res.data.msg,
										icon: 'none',
										duration: 2000,
										mask: true,
									});
								}
							},
							fail() {
								this.$utils.showToast(this, "发送失败！", 'error');
							},
							complete() {
								uni.hideLoading();
							}
						})
					} else { //timer不等于空表示倒计时还没结束
						uni.showToast({
							title: '验证码已发送',
							icon: 'none',
							duration: 2000,
							mask: true,
						});
					}
				} else {
					uni.showToast({
						title: '手机号输入错误',
						icon: 'none',
						duration: 2000,
						mask: true,
					});
				}
			},
			//倒计时时间判断
			getValidStr() {
				if (this.phone.time >= 0 && this.phone.time <= 60) {
					this.phone.time--;
					if (this.phone.time !== 0) {
						this.phone.verificationname = "倒计时" + this.phone.time + "s";
					} else {
						clearInterval(this.phone.timer);
						this.phone.verificationname = "获取验证码";
						this.phone.time = 60;
						this.phone.timer = '';
					}
				}
			},
			binding() {
				if (this.phone.number.length == 11) {
					let phoneinfo = new Object();
					phoneinfo.phoneNumber = this.phone.number;
					phoneinfo.VerifyCode = this.phone.verificationCode;
					uni.showLoading({
						title: "绑定中...",
						mask: true,
					});
					uni.request({
						url: getApp().globalData.serverAddress + this.$uri.Uri_bindingphone.replace(
							"{userRealId}", this.userinfo.userRealId),
						data: JSON.stringify(phoneinfo),
						dataType: "json",
						method: "POST",
						success: (resData) => {
							if (resData.statusCode !== 200) {
								this.$utils.showToast(this, '服务器错误,请联系技术支持人员!', 'error');
								return
							}
							if (resData.data.code == 0) {
								//绑定成功以后首先弹窗消失
								this.show = false
								//获取用户信息
								this.getuserinfo()
								//停止计时器以及把原来的数据改为初始值
								clearInterval(this.phone.timer);
								this.phone.verificationname = "获取验证码";
								this.phone.time = 60;
								this.phone.timer = '';
								//显示绑定成功
								this.$utils.showToast(this, '绑定成功！', 'success');
							} else {
								uni.showToast({
									title: resData.data.msg,
									icon: 'none',
									duration: 2000,
									mask: true,
								});
							}
						},
						fail: () => {
							uni.showToast({
								title: '绑定失败！',
								icon: 'none',
								duration: 2000,
								mask: true,
							});
						},
						complete: () => {
							uni.hideLoading();
						}
					})
				} else {
					uni.showToast({
						title: '手机号输入错误',
						icon: 'none',
						duration: 2000,
						mask: true,
					});
				}
			},
			//修改个人信息
			alter() {
				let info = new Object();
				info.Department = this.work;
				info.Job = this.job;
				uni.showLoading({
					title: "修改中...",
					mask: true,
				});
				uni.request({
					url: getApp().globalData.serverAddress + this.$uri.Uri_perfectuserinfo.replace(
						"{userRealId}", this.userinfo.userRealId),
					data: JSON.stringify(info),
					dataType: "json",
					method: "POST",
					success: (resData) => {
						if (resData.statusCode !== 200) {
							this.$utils.showToast(this, '服务器错误,请联系技术支持人员!', 'error');
							return
						}
						if (resData.data.code == 0) {
							this.$utils.showToast(this, '修改成功！', 'success', 3,
								'/pages/tabbar/userCenter');
						} else {
							this.$utils.showToast(this, resData.data.msg, 'error');
						}
					},
					fail: () => {
						this.$utils.showToast(this, '修改失败！', 'error');
					},
					complete: () => {
						uni.hideLoading();
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.u-form-item__body {
		padding: 15px 0 !important;
	}

	.tanchuang {
		width: 80%;
		margin: 7% auto 0%;
	}

	.title {
		font-weight: bold;
		font-size: 18px;
		text-align: center;
		margin: 5% auto;
	}
</style>